<template>
  <div class="wraps">
    <div class="filter-wraps">
      <div style="height: 100px;width: 100%"/>
      <el-form ref="addRForm" :model="form" :rules="rules" label-width="320px">
        <el-form-item prop="pass" label="请输入密码">
          <el-input v-model="form['pass']" placeholder="密码为8～16位,必须包含字母与数字" class="w80" />
        </el-form-item>
        <el-form-item prop="repass" label="再次输入">
          <el-input v-model="form['repass']" placeholder="请再次输入密码" class="w80" />
        </el-form-item>
        <el-form-item style="text-align: center; width: 65%">
          <el-button type="success" @click="submitRForm('addRForm')">确认修改</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<script>
import { fetchList } from '@/api/api'

export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入有效的电子邮箱！'))
      }
      if (value) {
        setTimeout(() => {
          const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
          if (!reg.test(value)) {
            callback(new Error('请输入有效的电子邮箱！'))
          } else {
            callback()
          }
        }, 500)
      }
    }
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入有效的电子邮箱！'))
      }
      if (value) {
        setTimeout(() => {
          if (this.form.pass !== value) {
            callback(new Error('请输入有效的电子邮箱！'))
          } else {
            callback()
          }
        }, 500)
      }
    }

    return {
      form: {
      },
      rules: {
        pass: [
          { required: true, validator: checkEmail, message: '密码为8～16位,必须包含字母与数字', trigger: 'blur' }
        ],
        repass: [
          { required: true, validator: checkPhone, message: '两次输入密码不一致', trigger: 'blur' }
        ]
      }
    }
  }, created() {
  },
  methods: {
    submitRForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form['username'] = localStorage['ghusername']
          this.form['query'] = 'vue_修改供货商密码'

          fetchList(this.form).then(({ data }) => {
            console.log(data)
            if (data.flag === '0') {
              this.$message({ message: '内部错误', type: 'error' })
            } else {
              this.$message({ message: '修改成功', type: 'success' })
            }
          })
        } else {
          return false
        }
      })
    }

  }
}
</script>

<style scoped>

  .wraps {
    height: 100%;
    width: 100%;
  }

  .filter-wraps {
    flex-direction: column;
    display: flex;
    box-shadow: 0 0 15px #D0D2E3;
    border-radius: 2px;
    background: white;
    width: 100%;
    height: 660px;
    margin-bottom: 18px;

  }
  .filter-wraps h4{
    text-align: center;
    color: #336633;
    border-bottom: #EFEFF7 solid 1px;
    line-height: 42px;
    margin: 0;
  }
  .filter-wraps p{
    font-size: 12px;
    padding: 0 10px;
    line-height: 24px;
    color: #336633;
  }

  .filter-wraps .el-form-item {
    margin-top: 16px;
    margin-bottom: 0px;
  }
  .w80{
    width: 50%;
  }
  .bg{
    background: #336633;
  }
</style>
